<template>
  <div class>
    <el-container>
      <el-aside class="silder" width="auto">
        <silder></silder>
      </el-aside>
      <el-container>
        <right-panel v-if="showSettings">
          <settings />
        </right-panel>
        <el-header class="head" height=" 60px">
          <div class="btn" @click="isCollapse = !isCollapse">
            <i class="el-icon-s-unfold" v-show="isCollapse"></i>
            <i class="el-icon-s-fold" v-show="!isCollapse"></i>
          </div>
          <div class="histry" v-show="showHistry">
            <div class="arrow left" @click="scrollLeft">
              <i class="el-icon-caret-left"></i>
            </div>
            <div class="histryBox" ref="tags">
              <tags-view />
            </div>
            <div class="arrow right" @click="scrollRight">
              <i class="el-icon-caret-right"></i>
            </div>
          </div>
          <div class="flex icons">
            <div class="wel item">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  你好，{{user}}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="loginOut" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="message item" style="line-height:25px;" @click="toMessage">
              <el-badge :value="count">
                <i class="el-icon-s-comment"></i>
              </el-badge>
            </div>

            <div class="set item" @click="set_show = !set_show ">
              <i class="el-icon-setting" />
            </div>
          </div>
        </el-header>
        <!-- <keep-alive>
          <div class="routers">当前位置：{{routers}}</div>
        </keep-alive>-->

        <el-main>
          <div class="main">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
    <WebSocket ref="myWebSocket" @getCount="getCount"></WebSocket>
  </div>
</template>
<script>
import silder from "./components/silder/silder.vue";
import TagsView from "./components/TagsView/index";

import RightPanel from "./components/settings/RightPanel";
import Settings from "./components/settings/index";

import WebSocket from "./components/websocket/index.vue";

export default {
  components: {
    silder,
    TagsView,
    RightPanel,
    Settings,
    // websocket
    WebSocket
  },
  data() {
    return {
      isCollapse: false,
      showSettings: true,

      userId: "",
      count:0
    };
  },
  mounted() {},
  computed: {
    set_show: {
      get: function() {
        return this.$store.state.settings.set_show;
      },
      set: function(nv) {
        this.$store.commit("set_show", nv);
      }
    },
    showHistry: {
      get: function() {
        return this.$store.state.settings.showHistry;
      },
      set: function(nv) {
        this.$store.commit("showHistry", nv);
      }
    },
    routers: function() {
      return this.$store.state.tagsView.visitedPath[
        this.$store.state.tagsView.visitedPath.length - 1
      ].meta.title;
    },
    user: function() {
      let userData = JSON.parse(sessionStorage.getItem("user"));
      this.userId = userData.id;
      return userData.realName;
    }
  },
  watch: {
    "$store.state.tagsView.visitedPath": function(v) {
      this.$nextTick(() => {
        this.$refs.tags.scrollLeft = this.$refs.tags.childNodes[0].scrollWidth;
      });
    },
    isCollapse: function(v) {
      this.$store.commit("isCollapse", v);
    }
  },
  methods: {
    toMessage(){
      console.log(444)
      this.$router.push("/mess/receive")
    },
    getCount(v){
      this.count = v
    },
    scrollRight() {
      this.$refs.tags.scrollLeft += 300;
    },
    scrollLeft() {
      this.$refs.tags.scrollLeft -= 300;
    },
    handleCommand(command) {
      if (command == "loginOut") {
        this.loginOut();
      }
    },
    loginOut() {
      // add by zhujq 该用户关闭已存在的websocket连接
      this.$refs.myWebSocket.disconnect(this.userId);
      sessionStorage.removeItem("token");
      this.$store.commit("visitedPathReset");
      sessionStorage.removeItem("user");
      this.$router.push("/login");
    }
  }
};
</script>
<style lang="scss" scoped>
// .el-main {
//   padding-top: 5px;
// }

.head {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  line-height: 60px;
}
.loginOut {
  cursor: pointer;
}
.silder {
  height: 100vh;
  background-color:#304156;
}
.btn {
  min-width: 60px;
  cursor: pointer;
  color: #304156;
  font-size: 40px;
  line-height: 60px;
}
.histry {
  width: calc(100% - 400px);
  height: 36px;
  display: flex;
}
.histryBox {
  height: 34px;
  margin: 0 10px;
  margin-top: 12px;
  width: 100%;
  border: 1px solid #f1f1f1;
  box-shadow: 2px 2px 2px #ccc inset, -2px -2px 2px #f1f1f1;
  border-radius: 4px;
  overflow: auto;
}
.is-vertical {
  width: calc(100% - 300px);
}
.histryBox::-webkit-scrollbar {
  width: 0;
  height: 0px;
  // border-radius: 3px;
}
.flex {
  min-width: 240px;
}
.routers {
  background-color: #fff;
  font-weight: 700;
  color: #666;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border-left: 3px solid #000;
  margin: 0 20px;
  margin-top: 5px;
  border-radius: 4px;
  padding-left: 20px;
}
.main {
  height: calc(100vh - 100px);
  overflow: auto;
  position: relative;
}
.fixedT {
  height: 54px;
}
.foot {
  border-top: 1px solid #ccc;
  line-height: 60px;
}
.icons{
  align-items: center;
  .item {
    cursor: pointer;
    i {
      font-size: 20px;
    }
    /deep/.el-badge__content.is-fixed{
      top:15px;
    }
  }
}

.arrow {
  box-shadow: 2px 2px 2px #ccc, -2px -2px 2px #f1f1f1 inset;
  border: 1px solid #c1c1c1;
  cursor: pointer;
  line-height: 34px;
  border-radius: 4px;
  width: 20px;
  height: 32px;
  margin-top: 12px;
}
.arrow:active {
  background-color: #c1c1c1;
}
</style>
